import React, { Component } from "react";
import { Modal, Tooltip, Form, Table, Row, Col, Spin, Divider, DatePicker, message, Button } from 'antd';
import ScModal from '../../../components/feedback/scModal';
import { findOrderList } from "../../../fetch/fetchApi";
import GridTable from '../../../components/display/gridTable';
import locale from "antd/lib/date-picker/locale/zh_CN";
import moment from 'moment';
import OrderDetail from "./orderDetail";
const {RangePicker} = DatePicker;

let isInitPagination = false;
const startDefaultDate = moment().subtract(7, 'days');
const endDefaultDate = moment();
class OrderList extends Component {
    constructor(props) {
        super(props);
        this.init();
        this.state = {
            gridData: [],
            pagination: {}
        }

    }

    init() {
        this.query = {
            page: '1',
            pagecount: '10',
            startTime: startDefaultDate.format("YYYY-MM-DD"),
            endTime: endDefaultDate.format("YYYY-MM-DD")
        };
        this.tableColumns = [
            {
                title: '平台订单号',
                dataIndex: 'key',
                key: 'key',
				className: 'column-nowrap',
                width:200
            }, {
                title: '充电时间',
                dataIndex: 'timeStart',
                key: 'timeStart',
				width:170,
                className: 'column-nowrap',
                render: (text, record) => (
                    <Tooltip placement="topLeft" title={text} >
                        {text}
                    </Tooltip>)
            }, {
                title: '充电应用',
                dataIndex: 'appType',
                key: 'appType',
				className: 'column-nowrap',
				width:200
            }, {
                title: '电桩编号',
                dataIndex: 'stubId',
                key: 'stubId',
				className: 'column-nowrap',
				width:140
            }, {
                title: '电量 (度)',
                dataIndex: 'power',
                key: 'power',
				className: 'column-nowrap',
				width:120
            }, {
                title: '时长 (分)',
                dataIndex: 'chargeTime',
                key: 'chargeTime',
				className: 'column-nowrap',
				width:120
            }, {
                title: '电费 (元)',
                dataIndex: 'feeElectric',
                key: 'feeElectric',
				className: 'column-nowrap',
				width:120
            }, {
                title: '服务费 (元)',
                dataIndex: 'feeService',
                key: 'feeService',
				width:140,
                className: 'column-nowrap',
                render: (text, record) => (
                    <Tooltip placement="topLeft" title={text} >
                        {text}
                    </Tooltip>)
            }, {
                title: '订单金额 (元)',
                dataIndex: 'feeTotal',
                key: 'feeTotal',
				className: 'column-nowrap',
				width:160
            }, {
                title: '充电状态',
                dataIndex: 'status',
                key: 'status',
				className: 'column-nowrap',
				width:140,
                render: (text, record) => (
                    <div>{text === 1 ? '充电中' : '订单结束'}</div>
                )
            }, {
                title: '停止原因',
                dataIndex: 'endInfo',
                key: 'endInfo',
				width:140,
                className: 'column-nowrap'
            }, {
                title: '操作',
                key: 'action',
				className: 'column-nowrap',
				width:140,
                render: (text, record) => (
                    <div className="action-wrap">
                        <a href="javascript:void(0);" onClick={() => this.showOrderDetailModal(record.key)}>订单详情</a>
                        <Divider type="vertical" />
                        <a href="javascript:void(0);" onClick={() => this.openTab({
                        'keyId': `progresschart${record.key}`,
                        'orderId': record.key
                    }, {
                        'key': 'progresschart',
                        titleText: '充电过程'
                    })}>充电过程</a>
                      </div>
                )
            }
        ];
    }

    openTab(param, e) {
        this.props.handle();
        this.props.onAdd.bind(window.LayoutTab)(e, param);
    }

    showOrderDetailModal = (orderId) => {
        this.setState({
            orderDetailVisible: true,
            orderId: orderId
        })
    }

    findOrderList = (params = {}) => {
        this.setState({
            orderListLoading: true
        })
        findOrderList(this.query).then((res) => {
            const pagination = this.state.pagination;
            pagination.total = res.data.pageLimit.totalCount;
            pagination.current = params.current || 1;
            if (!isInitPagination) {
                isInitPagination = true;
                pagination.onChange = (page, pageSize) => {
                    this.query["page"] = page;
                    this.query["pagecount"] = pageSize;
                    this.findOrderList({
                        current: page
                    });
                }
            }
            this.setState({
                gridData: res.data.data,
                orderListLoading: false
            });
        });
    }

    handleChange = (dates) => {
        const startDate = dates[0];
        const endDate = dates[1];
        if (!startDate || !endDate) {
            this.query.startTime = null;
            this.query.endTime = null;
            this.setState({
                rangeValue: null
            });
            return;
        }
        if (endDate.diff(startDate, 'days') > 7) {
            message.error('查询时间只能在7天以内');
            this.query.startTime = null;
            this.query.endTime = null;
            this.setState({
                rangeValue: null
            });
        } else {
            this.query.startTime = startDate.format("YYYY-MM-DD");
            this.query.endTime = endDate.format("YYYY-MM-DD");
            this.setState({
                rangeValue: dates
            });
        }
    }

    queryHandler = (e) => {
        this.query["page"] = 1;
        this.findOrderList();
    }

    componentDidMount() {
        this.setState({
            rangeValue: [startDefaultDate, endDefaultDate]
        })
        this.query["stubId"] = this.props.stubId;
        this.findOrderList();
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.stubId !== this.props.stubId) {
            this.query.startTime = startDefaultDate.format("YYYY-MM-DD");
            this.query.endTime = endDefaultDate.format("YYYY-MM-DD");
            this.query["stubId"] = nextProps.stubId;
            this.query["page"] = 1;
            this.setState({
                rangeValue: [startDefaultDate, endDefaultDate]
            })
            this.findOrderList();
        }
    }

    handleOrderDetailModalCancel =() => {
        this.setState({
            orderDetailVisible: false
        })
    }

    handleOrderDetail = () => {
        this.setState({
            orderId: ""
        })
    }

    render() {
        return (
            <div className="sc-page-content">
                <div className="page-toolbar">
                    <Row gutter={8}>
                        <Col lg={8} xl={8}>
                            <RangePicker format="YYYY-MM-DD" locale={locale} value={this.state.rangeValue} onChange={this.handleChange} />
                        </Col>
                        <div  className="button-inlineBlock">
                            <Button type="primary" onClick={this.queryHandler}>查询</Button>
                        </div>
                    </Row>
                </div>

                <div className="page-panel">
                    <GridTable postyle="table-center" scroll={{x:true}} data={this.state.gridData} loading={this.state.orderListLoading} columns={this.tableColumns} pagination={this.state.pagination}/>
                </div>

                <Modal width="800px" title="订单详情" visible={this.state.orderDetailVisible} footer={null} onCancel={this.handleOrderDetailModalCancel}>
                    <OrderDetail orderId={this.state.orderId} handle={this.handleOrderDetail}/>
                </Modal>
            </div>
        )
    }
}
export default OrderList;
